<!--  -->
<template>
  <ul class="m-nav">
    <li class="li my">
      <nuxt-link to="/my">我的美团</nuxt-link>
      <ul class="child1">
        <li>
          <nuxt-link to="/my">我的订单</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/my">我的收藏</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/my">抵用券</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/my">账户设置</nuxt-link>
        </li>
      </ul>
    </li>
    <li>
      <nuxt-link to="/my">手机APP</nuxt-link>
    </li>
    <li class="li bc">
      <nuxt-link to="/my">商家中心</nuxt-link>
      <ul class="child3">
        <li>
          <nuxt-link to="/my">登录商家中心</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/my">美团智能收银</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/my">我想合作</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/my">手机免费开店</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/my">餐饮代理商招募</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/my">商家申请开票</nuxt-link>
        </li>
      </ul>
    </li>
    <li class="li site">
      <nuxt-link to="/my">网站导航</nuxt-link>
      <el-row class="navsite">
        <el-col :span="4">
          <dl>
            <dt>酒店旅游</dt>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
            <dd>国际机票</dd>
          </dl>
        </el-col>
        <el-col :span="4" class="eatFood">
          <dl>
            <dt>吃美食</dt>
            <dd>烤鱼</dd>
            <dd>特色小吃</dd>
            <dd>烧烤</dd>
            <dd>自助餐</dd>
            <dd>火锅</dd>
            <dd>代金券</dd>
          </dl>
        </el-col>
        <el-col :span="4" class="lookMovie">
          <dl>
            <dt>看电影</dt>
            <dd>热映电影</dd>
            <dd>热门影院</dd>
            <dd>热映电影口碑榜</dd>
            <dd>最受期待电影</dd>
            <dd>国内票房榜</dd>
            <dd>欧美票房榜</dd>
            <dd>电影排行榜</dd>
          </dl>
        </el-col>
        <el-col :span="4" class="phoneAPP">
          <dl>
            <dt>手机应用</dt>

            <dd>
              <a href="https://i.meituan.com/mobile/down/meituan" target="_blank">
                <img
                  class="appicon"
                  src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/appicons/meituan.png"
                  title="美团app"
                  alt="美团app"
                >
              </a>
            </dd>
            <dd>
              <a href="https://phoenix.meituan.com/app/" target="_blank">
                <img
                  class="appicon"
                  src="//s0.meituan.net/bs/fe-web-meituan/404d350/img/appicons/zhenguo.png"
                  title="榛果app"
                  alt="榛果app"
                >
              </a>
            </dd>
            <dd>
              <a href="https://waimai.meituan.com/mobile/download/default" target="_blank">
                <img
                  class="appicon"
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/waimai.png"
                  title="外卖app"
                  alt="外卖app"
                >
              </a>
            </dd>
            <dd>
              <a href="https://www.dianping.com/events/m/index.htm" target="_blank">
                <img
                  class="appicon"
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/dianping.png"
                  title="点评app"
                  alt="点评app"
                >
              </a>
            </dd>
            <dd>
              <a href="https://maoyan.com/app" target="_blank">
                <img
                  class="appicon"
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/maoyan.png"
                  title="猫眼app"
                  alt="猫眼app"
                >
              </a>
            </dd>
          </dl>
        </el-col>
      </el-row>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  methods: {}
};
</script>
<style lang='scss' scoped>
.m-nav {
  display: flex;
  justify-content: flex-end;
  & > * {
    line-height: 40px;
  }
  li {
    float: left;
    padding: 0 15px;
  }
  .li:hover {
    color: #31bbac;
    background-color: #fff;
    border-color: #e5e5e5;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
  }

  .my {
    &:hover {
      .child1 {
        display: block;
      }
    }
    .child1 {
      position: absolute;
      display: none;
      width: 78px;
      background-color: #fff;
      border-color: #e5e5e5;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
      right: 233px;
      li {
        float: left;
        height: 35px;
      }
    }
  }
  .bc {
    &:hover {
      .child3 {
        display: flex;
      }
    }
    .child3 {
      display: none;
      position: absolute;
      background-color: #fff;
      border-color: #e5e5e5;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      // display: flex;
      flex-flow: column nowrap;
      align-items: center;
      right: 78px;
      z-index: 1000;
      // top:0;
    }
  }
  .site {
    &:hover{
      .navsite{
        display: flex;
      }
    }
    .navsite {
      display: none;
      position: absolute;
      width: 1200px;
      box-sizing: border-box;
      background-color: #fff;
      right: -1px;
      border: 1px solid #e5e5e5;
      box-shadow: 0 3px 5px 0 rgba($color: #000000, $alpha: 0.1);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top: none;
      z-index: 1000;
      padding: 30px 0 36px 0;
      justify-content: space-between;
      font-size: 12px;
      color: #31bbac;
      .el-col {
        width: 16.66667%;
        dt {
          font-size: 14px;
          text-align: center;
        }
        dd {
          float: left;
          width: 33%;
          height: 26px;
        }
      }
      .eatFood {
        width: 10%;
        dd {
          width: 48%;
        }
      }
      .lookMovie {
        width: 8%;
        dd {
          width: 100%;
          text-align: center;
        }
      }
      .phoneAPP {
        width: 38%;
        dd {
          width: 17%;
          display: block;
          margin-left: 10px;
          margin-top: 5px;
          a {
            display: block;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
